<template>
  <div class="app-container">
    <div>
      <el-row>
        <el-col :sm="{ span: 15, offset: 5 }" :xs="{ span: 24, offset: 0 }">
          <div style="width: 70%; margin: 0 auto; text-align: center">
            <el-row v-if="this.dss">
              <h3>您要找的内容，溜走了！！！🤣🤣🤣</h3>
              <a href="/">返回首页</a>
            </el-row>
          </div>
          <!-- 消息盒子 -->
          <el-row v-for="(item, key) in contentObj" :key="key">
            <div class="xxbox">
              <!-- 头像，用户名 -->
              <div class="ty">
                <el-row :gutter="24">
                  <el-col :sm="{ span: 2 }" :xs="{ span: 5, offset: 0 }"
                    ><el-avatar
                      class="ssss"
                      shape="square"
                      :size="50"
                      :src="item.param.uImage"
                    ></el-avatar
                  ></el-col>
                  <el-col :span="8"
                    ><div class="sub-title" @click="goToSpace(item.uid)">{{ item.param.uName }}</div></el-col
                  >
                  <el-col :span="10"
                    ><span class="time">{{ item.createTime }}</span></el-col
                  >
                </el-row>

                <el-row :gutter="24">
                  <el-col :sm="{ span: 2 }" :xs="{ span: 5, offset: 0 }"
                    ><div class="wwe"></div
                  ></el-col>
                  <el-col :sm="{ span: 22 }" :xs="{ span: 24, offset: 0 }">
                    <!-- 内容 -->
                    <p class="pre-wrap-text">{{ item.content }}</p>
                    <!-- 图片 -->
                    <div v-if="item.ctype === 1">
                      <el-row>
                        <div v-for="(sum, key) in item.pictureUrl" :key="key">
                          <el-col
                            :sm="{ span: 6, offset: 1 }"
                            :xs="{ span: 7, offset: 1 }"
                          >
                            <div>
                              <el-image
                                style="border-radius: 10px"
                                :style="imageStyle"
                                fit="true"
                                :src="sum"
                                :preview-src-list="item.pictureUrl"
                              >
                              </el-image>
                            </div>
                          </el-col>
                        </div>
                      </el-row>
                    </div>
                    <!-- 视频 -->
                    <div v-if="item.ctype === 2">
                      <el-col
                        :sm="{ span: 20, offset: 1 }"
                        :xs="{ span: 23, offset: 1 }"
                      >
                        <video
                          style="border-radius: 10px"
                          align="center"
                          :autoplay="false"
                          width="100%"
                          :height="videoStyle"
                          aspectRatio="16:9"
                          fluid="true"
                          preload="auto"
                          muted=""
                          controls="true"
                        >
                          <source :src="item.pictureUrl[0]" type="video/mp4" />
                          您的浏览器不支持视频标签！
                        </video>
                      </el-col>
                    </div>
                  </el-col>
                </el-row>

                <!-- 点赞,评论 -->
                <div class="dz">
                  <el-row :gutter="24">
                    <el-col :span="8">
                      <div
                        class="sz copy-btn"
                        data-clipboard-action="copy"
                        @click="fuzhi($event, item.cid)"
                      >
                        <img
                          width="20"
                          height="20"
                          src="~assets/images/fenxiang.png"
                        />
                        分享链接
                      </div></el-col
                    >
                    <div @click="dz(item.cid)">
                      <el-col :span="8">
                        <img
                          width="20"
                          height="20"
                          v-if="item.param.uIsZan === false"
                          src="~assets/images/dz.png"
                        />
                        <img
                          width="20"
                          height="20"
                          v-if="item.param.uIsZan === true"
                          src="~assets/images/dz1.png"
                        />
                        <span class="sz"
                          >点赞：{{ item.param.cNums }}</span
                        ></el-col
                      >
                    </div>

                    <el-col :span="8"
                      ><div @click="returnss()">
                        <svg
                          t="1638279774141"
                          class="icon"
                          viewBox="0 0 1024 1024"
                          version="1.1"
                          xmlns="http://www.w3.org/2000/svg"
                          p-id="18945"
                          data-spm-anchor-id="a313x.7781069.0.i62"
                          width="20"
                          height="20"
                        >
                          <path
                            d="M261.31 467.211l99.327-108.188-55.43-60.327L138.92 479.722l-27.648 30.141 193.981 211.39 55.34-60.55-99.283-108.188H677.5V467.21h-416.19zM442.423 1024h391.791a75.42 75.42 0 0 0 55.608-25.021 89.533 89.533 0 0 0 22.84-60.55V85.526A82.276 82.276 0 0 0 834.036 0H442.246v85.304H794.68a37.576 37.576 0 0 1 27.781 12.243 44.522 44.522 0 0 1 11.665 30.052v768.757a41.227 41.227 0 0 1-39.446 42.34H442.424V1024z m0 0"
                            p-id="18946"
                            fill="#bfbfbf"
                            data-spm-anchor-id="a313x.7781069.0.i61"
                            class="selected"
                          ></path>
                        </svg>
                        <span class="sz">返回</span>
                      </div>
                    </el-col>
                  </el-row>
                </div>
              </div>
            </div>
          </el-row>
        </el-col>
      </el-row>
    </div>

    <div>
      <el-row>
        <el-col :xs="0" :sm="4" :md="5" :lg="6" :xl="6"
          ><div class="grid-content"></div
        ></el-col>
        <el-col :xs="20" :sm="16" :md="14" :lg="12" :xl="12"
          ><div class="grid-content text">评论</div></el-col
        >
        <el-col :xs="2" :sm="4" :md="5" :lg="6" :xl="6"
          ><div class="grid-content"></div
        ></el-col>
      </el-row>
      <el-row style="margin-bottom: 10px">
        <el-col :xs="0" :sm="4" :md="5" :lg="6" :xl="6"
          ><div class="grid-content"></div
        ></el-col>
        <el-col :xs="24" :sm="16" :md="14" :lg="12" :xl="12"
          ><div class="grid-content text">
            <el-input
              style="width: 60%"
              v-model="notes"
              placeholder="请输入内容"
              clearable
              show-word-limit
              maxlength="50"
            >
            </el-input
            ><el-button
              type="primary"
              style="margin-left: 10px"
              round
              @click="pinlun()"
              >发布评论</el-button
            >
          <el-button type="primary" @click="faceContent" circle>😀</el-button>
          <div class="browBox" v-if="faceShow">
            <ul>
              <li
                v-for="(item, index) in faceList"
                :key="index"
                @click="getBrow(index)"
              >
                {{ item }}
              </li>
            </ul>
          </div>
          </div>
        </el-col>
        <el-col :xs="0" :sm="4" :md="5" :lg="6" :xl="6"
          ><div class="grid-content"></div
        ></el-col>
      </el-row>

      <!-- 一级评论 -->
      <el-row v-if="buer" v-for="(items, keys) in pingnote" :key="keys">
        <el-col :xs="3" :sm="4" :md="5" :lg="6" :xl="6"
          ><div class="grid-content" style="text-align: right">
            <el-avatar
              shape="square"
              :size="35"
              :src="items.param.uImage"
            ></el-avatar></div
        ></el-col>

        <el-col :xs="21" :sm="16" :md="14" :lg="12" :xl="12"
          ><div class="grid-content">
            <span
              style="
                padding-left: 10px;
                font-weight: bolder;
                font-size: 15px;
                color: rgb(88, 88, 88);
              "
            >
              {{ items.param.uName }}
                        <span
                          class="comment-item-tag"
                          v-if="isAuth(items.uid)"
                          style="background: rgb(254, 44, 85)"
                        ><span>作者</span>
              </span>
              :
            </span>
            <span class="ddfd"> {{ items.coContent }}</span>

          <el-tooltip effect="light" content="回复" placement="top">
            <el-button
              class="btn"
              type="text"
              @click="open(items.coid)"
              icon="el-icon-chat-dot-square"
            ></el-button>
          </el-tooltip>

          <el-tooltip effect="light" content="个人空间" placement="top">
            <el-button
            style="margin-left: 0"
            class="btn"
            type="text"
            @click="goToSpace(items.uid)"
            icon="el-icon-house"
          ></el-button>
          </el-tooltip>

          <el-tooltip effect="light" content="删除" placement="top">
            <el-button
              style="margin-left: 0"
              v-if="items.uid === usid"
              class="btn"
              type="text"
              @click="dialogOpen(items.coid)"
              icon="el-icon-delete"
            ></el-button>
            </el-tooltip>

          <el-tooltip effect="light" content="举报" placement="top">
          <el-button
            style="margin-left: 0"
            v-if="items.uid !== usid"
            type="text"
            class="btn"
            @click="open2(items.coid)"
            icon="el-icon-warning-outline"
          ></el-button>
          </el-tooltip>

          <span class="timess">{{ items.createTime }}</span>
          </div>
        </el-col>

        <el-row style="z-index: -99">
          <el-col :xs="4" :sm="7" style="height: 1px">
            <div class="grid-content"></div
          ></el-col>
        </el-row>

        <!-- 二级评论  -->
        <template v-if="showAllReplies[keys]">
        <el-row
          v-for="(items1, keys1) in items.children"
          :key="keys1"
        >
          <el-col :xs="4" :sm="6" style="height: 1px">
            <div class="grid-content"></div
          ></el-col>
          <el-col
            :xs="15"
            :sm="10"
            style="z-index:-1;"
          >
            <el-col :sm="{ span: 2 }" :xs="{ span: 5, offset: 0 }"
            ><div class="grid-content" style="text-align: right">
              <el-avatar
              class="ssss"
              shape="square"
              :size="30"
              :src="items1.param.uImage"
            ></el-avatar
              ></div></el-col>

            <span
              style="
                font-weight: bolder;
                font-size: 10pt;
                color: rgb(88, 88, 88);
                margin-left: 10px;
              "
            >
              {{ items1.param.uName }}
                        <span
                          class="comment-item-tag"
                          v-if="isAuth(items1.uid)"
                          style="background: rgb(254, 44, 85)"
                        ><span>作者</span>
              </span>
              <i class="el-icon-caret-right"></i>@{{
                items.param.uName
              }}:</span
            >
            <span class="ddfd">
              {{ items1.coContent }}
            </span>

            <el-tooltip effect="light" content="回复" placement="top">
              <el-button
                style="margin-left: 5px"
                type="text"
                class="btn"
                @click="open(items1.coid)"
                icon="el-icon-chat-dot-square">
              </el-button>
            </el-tooltip>

            <el-tooltip effect="light" content="个人空间" placement="top">
            <el-button
              style="margin-left: 0"
              class="btn"
              type="text"
              @click="goToSpace(items1.uid)"
              icon="el-icon-house"
            ></el-button>
            </el-tooltip>

            <el-tooltip effect="light" content="删除" placement="top">
            <el-button
              style="margin-left: 0"
              v-if="items1.uid === usid"
              type="text"
              class="btn"
              @click="dialogOpen(items1.coid)"
              icon="el-icon-delete"
            ></el-button>
            </el-tooltip>

            <el-tooltip effect="light" content="举报" placement="top">
            <el-button
              style="margin-left: 0"
              v-if="items1.uid !== usid"
              type="text"
              class="btn"
              @click="open2(items1.coid)"
              icon="el-icon-warning-outline"
            ></el-button>
            </el-tooltip>

            <span class="timess">{{ items1.createTime }}</span>
          </el-col>
        </el-row>

          <!-- 添加折叠按钮 -->
          <el-row>
            <el-col :xs="24" :sm="24" style="text-align: center; margin-top: 10px;">
              <el-button type="text" @click="toggleReplies(keys)" style="color: black">
                {{ showAllReplies[keys] ? '折叠回复' : '展开回复' }}
              </el-button>
            </el-col>
          </el-row>
        </template>

        <!-- 如果有回复但未展开，则显示“展开评论”按钮 -->
        <template v-else-if="!showAllReplies[keys] && items.children.length > 0">
          <el-row>
            <el-col :xs="24" :sm="24" style="text-align: center; margin-top: 10px;">
              <el-button type="text" @click="toggleReplies(keys)" style="color: black">展开回复</el-button>
            </el-col>
          </el-row>
        </template>
      </el-row>

      <el-row v-if="!buer">
        <el-col :xs="2" :sm="4" :md="5" :lg="6" :xl="6"
          ><div class="grid-content"></div
        ></el-col>
        <el-col :xs="20" :sm="16" :md="14" :lg="12" :xl="12"
          ><div
            class="grid-content"
            style="text-align: center; padding-top: 20px; font-weight: bold"
          >
            <span>暂无评论……</span>
          </div></el-col
        >
        <el-col :xs="2" :sm="4" :md="5" :lg="6" :xl="6"
          ><div class="grid-content"></div
        ></el-col>
      </el-row>
    </div>

    <!-- 弹出层 删除-->

    <el-dialog width="30%" title="提示" :visible.sync="dialogDelete">
      <p style="text-align: center; font-weight: bolder">
        <i
          class="el-icon-warning"
          style="color: red; font-size: 25px"
        />&nbsp;&nbsp;您要确认删除这条评论吗？
      </p>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogDelete = false">取 消</el-button>
        <el-button type="primary" @click="deletePinlun">确 定</el-button>
      </span>
    </el-dialog>

    <!--弹出层 评论-->
    <el-dialog title="请输入评论内容" :visible.sync="dialogComment" width="30%">
      <el-input v-model="pingnote2.coContent"
                placeholder="请输入评论内容"
                show-word-limit
                maxlength="50"
                clearable
      ></el-input>
      <el-button type="primary" @click="faceComment" circle>😀</el-button>
      <div class="browBox" v-if="faceShow2">
        <ul>
          <li
            v-for="(item, index) in faceList"
            :key="index"
            @click="getBrow1(index)"
          >
            {{ item }}
          </li>
        </ul>
      </div>
      <span slot="footer" class="dialog-footer">
      <el-button @click="dialogComment = false">取 消</el-button>
      <el-button type="primary" @click="submitComment" :disabled="pingnote2.coContent.length === 0">确 定</el-button>
    </span>
    </el-dialog>

    <!--弹出层  举报-->
    <el-dialog title="请输入举报内容" :visible.sync="dialogReport" width="30%">
      <el-input v-model="pingnote2.reportContent"
                placeholder="请输入举报内容"
                show-word-limit
                maxlength="50"
                clearable
      ></el-input>
      <span slot="footer" class="dialog-footer">
      <el-button @click="dialogReport = false">取 消</el-button>
      <el-button type="primary" @click="submitReport" :disabled="pingnote2.reportContent.length === 0">确 定</el-button>
    </span>
    </el-dialog>

  </div>
</template>
<script>
import touristApi from "@/api/tourist";
import Clipboard from "clipboard";
import cookie from "js-cookie";
import operateApi from "@/api/Operate";
import appData from "assets/emojis.json";
export default {
  data() {
    return {
      faceShow: false,
      faceShow2: false,
      faceList: [],
      dialogDelete: false,
      dialogComment: false,
      dialogReport: false,
      selectAid: 0,
      usid: 0,
      buer: false, //判断评论有无数据
      tabPosition: "left",
      metaObj: [],
      contentObj: [],
      metaActiveIndex: -1,
      contentVo: {},
      total: 0,
      currentPage: 0,

      dss: false, //CID无效验证
      imageStyle: "",
      notes: "",
      Pgroup: {},
      pingnote: [],
      pingnote2: {
        coContent:'',
        reportContent:'',
      }, //二级评论提交
      deletepinss: {}, //评论提交数据
      showAllReplies: {},
    };
  },

  // 页面创建后自动调用
  mounted() {
    if (cookie.get("campus-token") !== undefined) {
      this.usid = cookie.get("uid");
      // console.log(this.usid);
    }
    this.contentVo.cid = this.$route.query.cid;
    for (let i in appData) {
      this.faceList.push(appData[i].char);
    }
    if (this.contentVo.cid == null) {
      this.$router.push({ path: "/" });
    }
    this.getUserCid(this.contentVo);
    this.getpun(this.contentVo.cid);
    let width = document.documentElement.clientWidth;
    let height = document.documentElement.clientHeight;
    if (width < 720) {
      this.imageStyle = "width: 100%; height: 100px;";
      this.videoStyle = height / 4 + "px;";
    } else {
      this.imageStyle = "width: 100%; height: " + width / 6 + "px;";
      this.videoStyle = height / 3 + "px;";
    }
    this.pingnote.forEach((_, index) => {
      this.$set(this.showAllReplies, index, false);
    });
  },
  methods: {
    //弹出层
    dialogOpen(id) {
      this.dialogDelete = true;
      this.selectAid = id;
    },
    // 删除评论
    deletePinlun() {
      this.deletepinss.coid = this.selectAid;
      operateApi
        .deletePin(this.deletepinss)
        .then(() => {
          this.$message({
            type: "success",
            message: "删除成功!",
          });
          this.dialogDelete = false;
          this.getpun(this.contentVo.cid);
        })
    },
    //二级评论
    open(coid) {
      if (cookie.get("campus-token") === undefined) {
        this.$router.push({ path: "/userlogin", query: { id: "1" } });
      } else {
        this.pingnote2.coid = coid;
        this.pingnote2.cid = this.contentVo.cid;
        this.dialogComment = true; // 打开对话框
      }
    },
    submitComment() {
      operateApi.PostAcomment(this.pingnote2).then(
        () => {
          this.$message({
            type: "success",
            message: "回复成功！",
          });
          this.dialogComment = false; // 关闭对话框
          this.getpun(this.contentVo.cid);
          this.pingnote2.coContent='';
        }
      ).catch(error => {
        this.$message.error('回复失败，请重试！');
      });
    },
    // 举报
    open2(coid){
      if (cookie.get("campus-token") === undefined) {
        this.$router.push({ path: "/userlogin", query: { id: "1" } });
      } else {
        this.pingnote2.coid = coid;
        this.pingnote2.cid = this.contentVo.cid;
        this.dialogReport = true; // 打开对话框
      }
    },
    submitReport() {
      operateApi.PostAReport(this.pingnote2).then(
        () => {
          this.$message({
            type: "success",
            message: "提交成功！",
          });
          this.getpun(this.contentVo.cid);
          this.dialogReport = false; // 关闭对话框
          this.pingnote2.reportContent='';
        }
      ).catch(error => {
        this.$message.error('举报失败，请重试！');
      });
    },
    // 加载评论
    getpun(cid) {
      touristApi.getpinlun(cid).then((response) => {
        this.pingnote = response.data;
        if (this.pingnote != null) {
          this.buer = true;
        }
      });
    },
    //点赞
    dz(cid) {
      if (cookie.get("campus-token") === undefined) {
        this.$router.push({ path: "/userlogin", query: { id: "1" } });
      } else {
        operateApi.getUserIsZan(cid).then((response) => {
          const text = response.data;
          this.$message({
            showClose: true,
            message: text,
            type: "success",
          });
          this.getContent(this.contentVo);
        });
      }
    },
    fuzhi(e, cid) {
      const hostname = window.location.origin;
      const clipboard = new Clipboard(e.target, {
        text: () => hostname + "/function/share?cid=" + cid,
      });

      clipboard.on("success", (e) => {
        const h = this.$createElement;
        this.$notify({
          title: "复制成功：",
          message: h("i", { style: "color: teal" }, "快去分享给好朋友吧!"),
        });
        // 释放内存
        clipboard.destroy();
      });

      clipboard.on("error", (e) => {
        // 不支持复制
        // console.log('该浏览器不支持自动复制')
        // 释放内存
        clipboard.destroy();
      });
    },
    //获取所有内容
    getUserCid(contentVo) {
      touristApi
        .getUserCid(contentVo)
        .then((response) => {
          this.contentObj = response.data.records;
          this.total = response.data.cid;
          // console.log(this.contentObj);
          if (this.contentObj === "") {
            this.dss = true;
          }
        })
        .catch();
    },
    //获取cid用户内容
    getContent(contentVo) {
      touristApi
        .getContent(contentVo)
        .then((response) => {
          this.contentObj = response.data.records;
        })
        .catch();
    },
    // 发布评论
    pinlun() {
      if (cookie.get("campus-token") === undefined) {
        this.$router.push({ path: "/userlogin", query: { id: "1" } });
      } else if (this.notes !== "") {
        this.Pgroup.cid = this.contentVo.cid;
        this.Pgroup.coContent = this.notes;
        // console.log(this.Pgroup);
        operateApi.PostAcomment(this.Pgroup).then((response) => {
          this.$message.success("评论成功！");
          this.getpun(this.contentVo.cid);
          this.notes="";
        });
      } else {
        this.$message.error("不能发布空内容！");
      }
    },
    returnss() {
      this.$router.go(-1);
    },
    faceContent() {
      this.faceShow = !this.faceShow;
    },
    faceComment(){
      this.faceShow2= !this.faceShow2;
    },
    getBrow(index) {
      const emoji = this.faceList[index];
      this.notes += emoji;
    },
    getBrow1(index){
      const emoji = this.faceList[index];
      this.pingnote2.coContent += emoji;
    },
    goToSpace(value) {
      this.$router.push({ path: '/function/space?uid=' + value });
    },
    isAuth(uid) {
      return this.contentObj.find(record => record.uid === uid);
    },
    toggleReplies(index) {
      this.$set(this.showAllReplies, index, !this.showAllReplies[index]);
    }
  },
};
</script>
<style>
.btn{
  padding: 2px;
  font-size: 20px;
  color: black;
  background-color: white;
}
.timess {
  padding: 2px;
  font-size: 10px;
  color: rgba(65, 64, 64, 0.863);
  margin: 15px 15px 30px 15px;
  /* box-shadow: 0 10px 12px 0 rgba(0, 0, 0, 0.2); */
  background-color: rgba(138, 136, 136, 0.219);
  box-shadow: 0 0 25px rgb(0 0 0 / 10%);
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-right: 1px solid rgba(255, 255, 255, 0.2);
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 10px;
}
.ddfd {
  font-size: 17px;
  padding: 2px;
  color: black;
  /* box-shadow: 0 10px 12px 0 rgba(0, 0, 0, 0.2); */
  background-color: white;
  border: 1px solid black;
  border-radius: 5px;
}
.xxbox {
  margin: 15px 15px 30px 15px;
  /* box-shadow: 0 10px 12px 0 rgba(0, 0, 0, 0.2); */
  background-color: rgba(255, 255, 255, 0.1);
  box-shadow: 0 0 25px rgb(0 0 0 / 10%);
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-right: 1px solid rgba(255, 255, 255, 0.2);
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 10px;
}
.ty {
  padding: 5px;
}
.sub-title {
  padding-top: 20px;
  font-size: 15px;
  font-weight: bold;
  cursor: pointer;
}
.time {
  padding-top: 20px;
  float: right;
  font-size: 12px;
  color: darkgrey;
}

.sz {
  font-weight: bolder;
  cursor: pointer;
  font-size: 10px;
  color: rgb(110, 110, 110);
}

.dz {
  text-align: center;
  margin: 5px;
}

.ssss {
  margin: 5px 0 0 5px;
}
.wwe {
  height: 10px;
}

.text {
  font-size: 20px;
  text-align: center;
  font-weight: bolder;
}

.grid-content {
  border-radius: 4px;
  min-height: 36px;
}
.browBox {
  width: 300px;
  height: 220px;
  background: #e6e6e6;
  bottom: 0;
  overflow: scroll;
  ul {
    display: flex;
    flex-wrap: wrap;
    padding: 10px;
    li {
      width: 14%;
      font-size: 26px;
      list-style: none;
      text-align: center;
    }
  }
}
.comment-item-tag {
  flex-shrink: 0;
  font-size: 10px;
  height: 12px;
  //margin-left: 8px;
  color: #fff;

  align-items: center;
  border-radius: 4px;
  display: inline-flex;
  font-weight: 500;
  justify-content: center;
  line-height: 20px;
  padding: 0 4px;
}
.pre-wrap-text {
  white-space: pre-wrap; /* 保持空白符序列，但是正常地进行换行 */
}
.app-container {
  height: 100%; /* 使其高度充满整个视口 */
  overflow-y: hidden; /* 不允许垂直滚动 */
}
</style>
